<template>
  <div class="periphery">
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">周边</span>
      <span class="header-wrap-right"></span>
    </div>
    <div id="map"></div>
    <p class="errortext" ref="errtext"></p>
    <ul class="box">
      <li  @click="getRound(index,title.name)" v-for="(title,index) in valueData" :key="index" :class="{active:categoryIndex==index}">{{title.name}}</li>
    </ul>
    <ul class="listTyle" @click="goRoundDetail(list.uid)" v-for="(list,index) in options.listData" :key="index">
      <li style="font-weight:bold;">{{list.name}}</li>
      <li style="margin:.2rem 0;color:rgb(238, 89, 139);">{{list.telephone?list.telephone:'暂无商家电话'}}</li>
      <li class="address">{{list.address}}</li>
      <li class="go">
        <img style="width:.3rem;heiht:.3rem" src="../../assets/images/next_right.png" alt="">
      </li>
    </ul>
  </div>
</template>
<script>
import { Col, Row } from 'vant';
export default {
  components: {
    [Col.name]:Col,
    [Row.name]:Row
  },
  data(){
    return{
      options :{
        map: '',
        listData:[],
        lat:'',
        lng:'',
        value:'',
        enableHighAccuracy: true, // --->是否获取更精确的位置  true/false 
        timeout: 5000, // --->请求超时时间,单位ms；
        maximumAge: 0
      },
      categoryIndex:0,
      msg:'',
      defvalue:'美食',
      valueData:[
        {name:'美食',id:'1'},
        {name:'景点',id:'2'},
        {name:'酒店',id:'3'},
        {name:'休闲娱乐',id:'4'},
        {name:'厕所',id:'5'},
        {name:'银行',id:'6'},
        {name:'加油站',id:'7'},
        {name:'停车场',id:'8'},
        {name:'风景区',id:'9'},
        {name:'超市',id:'10'}
      ]
    }
  },
  mounted(){

  },
  created(){
      // 百度地图API功能
    this.$nextTick(()=>{
      this.getLocation()
    })
  }, 
  methods:{
    goback(){
      this.$router.go(-1)
    },
    getLocation(){
      let geolocation = new BMap.Geolocation() ; 
      geolocation.getCurrentPosition((position)=>{
        this.options.lat= position.latitude ; 
        this.options.lng= position.longitude; // 经度
        this.getRound(0,this.defvalue) 
      },(error)=>{
          console.log(error)
      }); 
    },
  // 获取周边接口
    getRound (index,value) {
      this.categoryIndex = index
      this.$jsonp("https://api.map.baidu.com/place/v2/search?query="+value+"&location="+this.options.lat+','+this.options.lng+"&radius=2000&output=json&ak=hlTOCwmv7dccdMhFXZLMYr1051QD2Vqs&s=1",{})
      .then((response) => {
        this.options.listData = response.results
        console.log(this.options.listData)
      })
      .catch((error) => {
        console.log(error);
      })
    },
    goRoundDetail (uid) {
      this.$jsonp("https://api.map.baidu.com/place/v2/detail?uid="+uid+"&output=json&scope=2&ak=hlTOCwmv7dccdMhFXZLMYr1051QD2Vqs&s=1",{})
      .then((response) => {
        this.msg = response.result
        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '加载中...',
        });
        setTimeout(() => {
          this.$toast.clear();
          window.location.href = this.msg.detail_info.detail_url
        }, 300);
      })
      .catch((error) => {
        console.log(error);
      })
    },
  },
}
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1rem 0 .3rem 0;
}
.box li{
  color: #fff;
  background: #6dd5ed;  /* fallback for old browsers */
  margin: .3rem .3rem 0;
  width: calc(25% - .6rem);
  line-height: .5rem;
  text-align: center;
  border-radius: .1rem;
  font-size: .24rem;
}
.listTyle{
  position: relative;
  background: #fff;
  padding: .4rem .2rem;
  margin: .2rem .3rem;
  border: 1px solid #eee;
  border-radius: .2rem;
}
.listTyle:nth-last-of-type(1){
  margin: .2rem .3rem .8rem;
}
/* .listTyle span{
  display: block;
} */
.address{
  width:calc(100% - .3rem);
  font-weight: lighter;
  display: block;
   overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */ 
}
.go{
  position: absolute;
  right: .1rem;
  top: 45%;
  color: #ee5383;
}
.active {
  background: #57c5c6!important;  /* fallback for old browsers */
}
</style>